<template>
  <app-page card>
    <el-form
      :model="formData"
      ref="formRef"
      @submit.prevent="handleSubmit"
      style="max-width: 512px"
      label-width="165px"
      label-position="left"
    >
      <jax-desc title="后台设置">
        <jax-form-group v-model="formData" :json="formJson" />
      </jax-desc>
    </el-form>

    <template #footer>
      <el-button type="primary" @click="handleSubmit">保存</el-button>
    </template>
  </app-page>
</template>

<script setup>
import { http, useAppStore } from 'jax-node'
import { ElMessage } from 'element-plus'

const formRef = ref()
const formData = ref({})
const { init } = useAppStore()

http(`/system/setting`).then(res => {
  formData.value = res
})

const fixed = false
const required = true
const miniInput = { style: 'width:200px' }
const maxInput = { style: 'width:300px' }
const formJson = computed(() => {
  return [
    { name: 'title', label: '网站名称', required },
    { name: 'logo', label: '网站LOGO', type: 'uploadImage' },

    { name: 'background', label: '平板背景图', type: 'uploadImage' },
    // { name: 'standbyImage', label: '待机图片', type: 'uploadImage' },
    // { name: 'standbyVideo', label: '待机视频', type: 'uploadFile' },
  ]
})

const handleSubmit = () => {
  formRef.value.validate().then(() => {
    http.put(`system/setting`, formData.value, { showLoading: true }).then(res => {
      ElMessage.success('保存成功')
      init()
    })
  })
}
</script>

<style lang="scss" scoped></style>
